<template>
  <div class="login-page">
    <div class="background"></div>
    <div class="form-container">
      <p style="font-size: 30px; font-weight: bold; justify-content: center;">登陆</p>
      <p class="register-link">
        没有账号？<span @click="goRegister" style="color: blue;">立即注册</span>
      </p>
      <div class="role-select">
        <button
          :class="{ active: activeRole === 'student' }"
          @click="activeRole = 'student'"
        >学生</button>
        <button
          :class="{ active: activeRole === 'teacher' }"
          @click="activeRole = 'teacher'"
        >教师</button>
        <button
          :class="{ active: activeRole === 'admin' }"
          @click="activeRole = 'admin'"
        >管理员</button>
      </div>
      <form @submit.prevent="handleLogin">
        <div class="input-group">
          <input
            v-model="form.phone"
            type="text"
            placeholder="手机号"
            @input="validatePhone"
          >
          <span v-if="phoneError" class="error">{{ phoneError }}</span>
        </div>
        <div class="input-group">
          <input
            v-model="form.password"
            :type="showPass ? 'text' : 'password'"
            placeholder="密码"
            maxlength="8"
            @input="handlePassword"
          >
          <span v-if="passwordError" class="error">{{ passwordError }}</span>
        </div>
        <div class="options">
          <span @click="goForgot" style="color: blue;">忘记密码？</span>
        </div>
        <button type="submit">登录</button>
      </form>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { loginUser } from '@/api/user';
import { ElMessage } from 'element-plus';

const router = useRouter();

const activeRole = ref('student');
const showPass = ref(false);
const phoneError = ref('');
const passwordError = ref('');

const form = reactive({
  phone: '',
  password: ''
});

const validatePhone = () => {
  const phoneRegex = /^1[3-9]\d{9}$/;
  phoneError.value = phoneRegex.test(form.phone) ? '' : '无效手机号';
};

const handlePassword = () => {
  showPass.value = true;
  setTimeout(() => (showPass.value = false), 500);
};

const handleLogin = async () => {
  try {
    const credentials = {
      phone: form.phone,
      password: form.password,
      role: activeRole.value
    };
    const response = await loginUser(credentials);
    // 登录成功后，可将用户信息存储到本地存储或状态管理中
    localStorage.setItem('currentUser', JSON.stringify(response.data));
    const redirectPath = activeRole.value === 'teacher'
     ? '/teacher'
      : activeRole.value === 'admin'
     ? '/admin'
      : '/student';
    router.push(redirectPath);
  } catch (error) {
    passwordError.value = error.response?.data?.message || '登录失败，请检查账号和密码';
  }
};

const goRegister = () => router.push('/register');
const goForgot = () => router.push('/forgot');
</script>

<style scoped>
.login-page {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.background {
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
              url('@/assets/bg.png') no-repeat center/cover;
  filter: blur(8px);
  z-index: 0;
}

.form-container {
  background: rgba(255, 255, 255, 0.95);
  padding: 40px;
  border-radius: 20px;
  width: 440px;
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease;
}

.form-container:hover {
  transform: translateY(-5px);
}

.register-link {
  text-align: center;
}

.role-select {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.role-select button {
  margin: 0 10px;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.role-select button.active {
  background-color: #409eff;
  color: white;
}

.input-group {
  margin-bottom: 20px;
}

.input-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.error {
  color: red;
  font-size: 12px;
  margin-top: 5px;
}

.options {
  text-align: right;
  margin-bottom: 20px;
}

button[type="submit"] {
  width: 100%;
  padding: 10px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style>